<template>
<div>
    <p class="phonerighttop">个人资料</p>
    <div class="Dmain">
        <div class="Ditem">
            <span class="Dwidth">当前头像：</span>
            <img :src="headimg" alt="头像" class="Dheandimg">
            <a class="Dxiugai" href="###">修改</a>
        </div>
        <div class="Ditem">
            <span class="Dwidth">昵称：</span>
            <input type="text" class="Dnick" :value="nickname">
        </div>
        <div class="Ditem">
            <span class="Dwidth1">性别:</span>
            <i class="Dsexicon" :class="{'Dsexicon1':sex1}" @click="changeicon()"></i>
            <span class="Dsexcon Dsexcon1">男</span>
            <i class="Dsexicon" :class="{'Dsexicon1':sex2}" @click="changeicon()"></i>
            <span class="Dsexcon1">女</span>
        </div>
        <div class="Ditem">
            <span class="Dwidth"> 生日：</span>
            <input type="text" class="Dyear" :value="time1">
            <span class="Dtime">年</span>
            <i class="Dyearicon"></i>
            <input type="text" class="Dyear Dmouth" :value="time2">
            <span class="Dtime">月</span>
            <i class="Dyearicon Dyearicon1"></i>
            <input type="text" class="Dyear Dmouth" :value="time3">
            <span class="Dtime">日</span>
            <i class="Dyearicon Dyearicon2"></i>
        </div>
        <div class="Ditem">
            <span class="Dwidth">手机：</span>
            <input type="text" class="Dnick" :value="phone">
            <span class="changephone" @click="todatachange()">更换手机</span>
        </div>
        <button class="Dbut">确认提交</button>
    </div>
</div>
</template>

<script>
import axios from 'axios';
import Bus from './Bus';
export default {
    name:'Dataperson',
    data(){
        return{
            nickname:'',
            headimg:'',
            sex:'',
            sex1:false,
            sex2:false,
            time1:1998,
            time2:3,
            time3:6,
            phone:'',
        }
    },
    methods:{
        changeicon(){
            this.sex1 = !this.sex1;
            this.sex2 = !this.sex2;
        },
        todatachange(){
            this.$emit('data1');
        },
    },
    mounted() {
        axios({
            method:'get',
            url:'/api/small/user/verify/v1/getUserById',
            headers:{
                    userId:this.$store.state.obj[0].userId,
                    sessionId:this.$store.state.obj[0].sessionId
                }
        }).then(res=>{
            console.log(res.data.result);
            this.headimg = res.data.result.headPic;
            this.nickname = res.data.result.nickName;
            this.sex = res.data.result.sex;
            this.phone = res.data.result.phone;
            this.$store.state.phone = this.phone;
            this.$store.state.pas = res.data.result.password;
            // console.log(this.sex);
            if (this.sex==1) {
                this.sex1 = true;
                this.sex2 = false;
            }else {
                this.sex2 = true;
                this.sex1 = false;
            }
        }),
        Bus.$emit('data',data=>{
            console.log(data);
        })
    },
}
</script>

<style scoped>
.phonerighttop {
    height: 56px;
    border-bottom: 1px solid #e7e7e7;
    line-height: 56px;
    text-align: left;
    padding-left: 20px;
    color: #323333;
    font-size: 18px;
}
.Dmain {
    margin-left: 40px;
    margin-top: 40px;
    font-size: 18px;
    color: #333;
}
.Dmain div:first-child {
    margin-bottom: 10px;
}
.Ditem {
    margin-bottom: 20px;
    position: relative;
}
.Dheandimg {
    width: 77px;
    height: 77px;
    vertical-align: middle;
}
/* 文字叙述 */
.Dwidth,.Dwidth1 {
    display: inline-block;
    width: 100px;
    text-align: right;
    margin-right: 10px;
}
.Dwidth1 {
    width: 89px;
    margin-right: 20px;
}
/* 修改 */
.Dxiugai {
    font-size: 14px;
    color: #4b943d;
    margin-left: 15px;
}
/* 昵称 */
.Dnick {
    height: 33px;
    border: 1px solid #d3d3d3;
    background: #f4f4f4;
    font-size: 16px;
    color: #666;
    padding-left: 16px;
    width: 154px;
}
/* 性别 */
.Dsex {
    display: none;
}
.Dsexicon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../../assets/imgs/green-radio.png);
    vertical-align: middle;
    margin-right: 10px;
}
.Dsexcon {
    margin-right: 36px;
}
.Dsexcon1 {
    font-size: 16px;
    color: #666666;
}
.Dsexicon1 {
    background: url(../../assets/imgs/green-radio.png) -24px 0;
}
/* 生日 */
.Dyear {
    height: 33px;
    width: 97px;
    border: 1px solid #d3d3d3;
    padding-left: 11px;
    font-size: 16px;
    color: #333333;
    margin-right: 10px;
}
.Dyearicon { 
    border: 6px solid #999999;
    transform: rotate(45deg);
    border-left-color: transparent;
    border-top-color: transparent;
    position: absolute;
    top: 6px;
    left: 192px;
}
.Dyearicon1 {
    left: 355px;
}
.Dyearicon2 {
    left: 520px;
}
.Dtime {
    font-size: 16px;
    color: #333333;
    margin-right: 23px;
}
.Dmouth {
    width: 103px;
    padding-left: 10px;
}
/* 更换手机 */
.changephone {
    font-size: 16px;
    color: #4b943d;
    margin-left: 22px;
    cursor: pointer;
}
/* 确认提交 */
.Dbut {
    font-size: 20px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    height: 50px;
    width: 150px;
    margin-left: 110px;
    margin-top: 20px;
}
</style>